<template>
    <div class="wechat-menu-list">
        <h1>食品分类</h1>
        <el-button type="primary" @click="addForm">添加菜单</el-button>

        <el-table :data="list" style="width: 100%" v-loading="loading">
            <el-table-column prop="name" label="分类名称" width="180">
            </el-table-column>
            <el-table-column prop="sort" label="排序" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button @click="editForm(scope.row)" type="text" size="small" >编辑</el-button>
                    <el-button @click="deleteMenu(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--表单-->
        <el-dialog  :visible.sync="formVisible">
            <span slot="title" class="dialog-footer" v-text="ruleForm.title"></span>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

                <el-form-item label="名称" prop="name">
                    <el-input type="text" v-model="ruleForm.name" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input type="text" v-model="ruleForm.sort" auto-complete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="formVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>

    export default {
        name: 'wechat-menu-list',
        data() {
            return {
                loading:true,
                apiUrl: apiUrl,
                formVisible: false,
                ruleForm: {
                    title: '添加分类',
                    action: '',
                    id: '',
                    name: '',
                    sort: 0
                },
                rules: {
                    name: [
                        {required: true, message: '请输入菜单名称', trigger: 'blur'}
                    ]
                },
                //分类列表
                list:[],
                formLabelWidth: '120px'

            }
        },

        mounted() {
            this.$nextTick(function () {
                this.load(); //概况
            })
        },
        methods: {
            addForm(){
                this.formVisible = true;
                this.ruleForm.title = '添加菜单';
                this.ruleForm.action = this.apiUrl + 'FoodSpecies/add';
                this.ruleForm.id = 0;
                this.ruleForm.name = '';
                this.ruleForm.sort=0;
            },
            editForm(form){
                this.formVisible = true;
                this.ruleForm.title = '编辑菜单';
                this.ruleForm.action = this.apiUrl + 'FoodSpecies/edit';
                this.ruleForm.id = form.id;
                this.ruleForm.name = form.name;
                this.ruleForm.sort=form.sort;
            },
            deleteMenu(id){
                var url = this.apiUrl + 'FoodSpecies/delete';
                this.$http.get(url, {
                    params: { id: id }
                }).then(response => {
                    if(response.data.status==1){
                        this.$message.success('删除成功');
                        this.load();
                    }else{
                        this.$message.error('删除失败');
                    }
                }, response => {
                    this.$message.error('删除失败');
                    console.log(response);
                });
            },
            submitForm(formName) {

                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post(this.ruleForm.action, this.ruleForm).then(response => {

                            if(response.data.status==1){
                                this.$message.success('保存成功');
                                this.formVisible = false;
                                this.load();
                            }else{
                                this.$message.error('保存失败');
                            }
                        }, response => {
                            this.$message.error('保存失败');
                            console.log(response);
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //概况数据获取
            load() {
                this.$http.get(this.apiUrl + 'FoodSpecies/species').then(response => {
                    this.loading = false;
                    console.log(response.data);
                    this.list = response.data;
                }, response => {
                    this.$message.error('加载失败');
                    console.log(response);
                });
            },

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
